
/*
    更改Vuex的store中的状态的唯一方法是提交mutation，每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)
    Mutation 必须是同步函数

*/


const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) { 
      // 变更状态
      state.count++
    }
  }
})

/*
    提交载荷(Payload)，向store.commit传入额外的参数，即mutation 的 载荷
*/

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

// 提交方式一
store.commit('increment', {
  amount: 10
})

// 提交方式二，对象风格
store.commit({ // 这个对象都作为载荷传给mutation函数
  type: 'increment', // type，指定事件类型
  amount: 10
})

/*  
    在组件中提交 Mutation
        在组件中使用 this.$store.commit('xxx') 提交 mutation，
        或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

*/

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}




/*
    使用常量替代 Mutation 事件类型
*/

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: {},
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})



